import React from "react";
import L from 'leaflet';
import '../../utils/leafletUtils/leaflet.ChineseTmsProviders';
import '../../utils/leafletUtils/basic.ruler-src';
import '../../utils/leafletUtils/basic.ruler-src.css';
import '../../utils/leafletUtils/leaflet-polygon.fillPattern';
import 'leaflet/dist/leaflet.css';
import './Home.less';

let map;

let satellite = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
    maxZoom: 18,
    minZoom: 11
})
let terrain = L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', {
    maxZoom: 18,
    minZoom: 11
});
let traffic = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
    maxZoom: 18,
    minZoom: 11
});

class Home extends React.Component {

    state = {
        layerWrapClass : "layerControl",
        layers: [
            {name: satellite, text: "卫星", img: "0 -120px"},
            {name: terrain, text: "地形", img: "0 -60px"},
            {name: traffic, text: "交通", img: "0 0"}
        ],
        chosenLayer: satellite,
        chosenText: "卫星",
        chosenImg: "0 -120px"
    }

    componentDidMount() {
        let attribution = '<span id="refdiv"></span> &copy; ';



        // let baseLayers = {
        //     "<div class='mapIcon'> <span class='mapItem'>卫星</span></div>": satellite,
        //     "<div class='mapIcon mapIcon1'> <span class='mapItem'>地形</span></div>": terrain,
        //     "<div class='mapIcon mapIcon2'> <span class='mapItem'>交通</span></div>": traffic
        // }

        // var map = L.map('map', {layers:[tiandituTrafficLayer]}).setView([29.86964, 121.56926], 15);
        map = L.map('map', {
            attributionControl: true,
            layers: [satellite],
            zoom: 11,
            center: [31.028835, 113.760008]
        });

        map.on('click', function (ev) {
            map.invalidateSize(); // 宽度改变之后，画的图层会有问题，重刷
            // setTimeout(function(){
            // map.invalidateSize();
            // },400)
            // console.log(ev.latlng); // ev is an event object (MouseEvent in this case)
        });


        map.on('resize', function (ev) {
            map.invalidateSize();
        });
        // L.control.scale({ metric: true, imperial: false }).addTo(map);
        // L.control.attribution({prefix:'d'}).addAttribution();
        // map.attributionControl._attributions = {};
        map.zoomControl.setPosition("topleft");
        // map.attributionControl.addAttribution(attribution);
        map.attributionControl.setPrefix(false);


        map.addControl(new L.Control.LinearCore({
            unitSystem: 'metric',
            color: '#4D90FE',
            type: 'line',
            position: 'topleft'
        }));



    }

    getOver = () => {
        this.setState({
            layerWrapClass: "layerControl layerExpand"
        })
    }

    getClosed = () => {
        this.setState({
            layerWrapClass: "layerControl"
        })
    }

    switchLayer = (obj) => {
        if(this.state.layers[Number(obj.target.id)-1].name != this.state.chosenLayer){
            map.addLayer(this.state.layers[Number(obj.target.id)-1].name)
            map.removeLayer(this.state.chosenLayer);

            this.setState({
                chosenLayer: this.state.layers[Number(obj.target.id)-1].name,
                chosenText: this.state.layers[Number(obj.target.id)-1].text,
                chosenImg: this.state.layers[Number(obj.target.id)-1].img
            })
        }

    }

    render() {

        return (
            <div className="home">
                <div className={this.state.layerWrapClass} onMouseOver={this.getOver}>
                    <div className="layerChosen">
                        <div className='mapIcon' style={{backgroundPosition: this.state.chosenImg}}> <span className='mapItem'>{this.state.chosenText}</span></div>
                    </div>
                    <div className="layerArea" onMouseLeave={this.getClosed}>
                        <div className='mapIcon' onClick={this.switchLayer} id="1"> <span className='mapItem'>卫星</span></div>
                        <div className='mapIcon mapIcon1' onClick={this.switchLayer} id="2"> <span className='mapItem'>地形</span></div>
                        <div className='mapIcon mapIcon2' onClick={this.switchLayer} id="3"> <span className='mapItem'>交通</span></div>
                    </div>
                </div>
                <div id="map"></div>

            </div>
        );
    }
}

export default Home;